<template>
  <div id="custom_list">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit">数据定制
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
          >
            <vue-editor
              v-model="helpArrays.CUSTOM_DESC"
              :disabled="true"
              :editor-toolbar="customToolbar"
            />
            <i
              slot="reference"
              class="el-icon-question"
              style="color:#409eff;margin-left:5px;font-size:20px;"
            />
          </el-popover>
        </span>

        <i
          class="el-icon-circle-plus-outline"
          @click="appends"
        />
      </div>
      <el-table
        :data="tableData"
        border
        style="width: auto"
        @selection-change="changeFun"
      >
        <el-table-column
          label="选择"
          type="selection"
          width="30"
        />
        <el-table-column
          prop="name"
          label="数据名称"
          width="120"
        />
        <el-table-column
          prop="decrypt"
          label="数据描述"
          width="120"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row.id)"
            >查看自定义数据详情</el-button>
            <el-button
              type="text"
              size="small"
              @click="delClick(scope.row.id)"
            >删除</el-button>
          </template>

        </el-table-column>

      </el-table>
      <el-pagination
        :page-size="10"
        :total="total"
        small
        layout="prev, pager, next"
        @prev-click="prePage"
        @next-click="nextPage"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>
<script>
import { cdsList, docwindow, cdsDel } from '@/api/page'
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      total: 0,
      tableData: [],
      data: {
        current: 1,
        size: 10,
        condition: {
          pid: ''
        }
      },
      checkBoxData: [],
      arr: [],
      customToolbar: [],
      helpArrays: []
    }
  },
  mounted() {
    localStorage.removeItem('customid')

    this.onload()
    this.arr = ['CUSTOM_DESC']

    docwindow(this.arr)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.helpArrays = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })
  },
  methods: {
    currentChange(cpage) {
      this.data = {
        current: cpage,
        size: 5,
        condition: {
          pid: this.data.condition.pid
        }
      }
      // customList(this.data)
      //   .then(response => {
      //     if (response.data.code == "SUCCESS") {
      //       this.tableData = response.data.data.records;
      //     } else {
      //       alert(response.data.message);
      //     }
      //   })
      //   .catch(error => {
      //     alert(error.response.data.message);
      //   });
    },
    nextPage(cpage) {
      this.data = {
        current: cpage,
        size: 5,
        condition: {
          pid: this.data.condition.pid
        }
      }
      // customList(this.data)
      //   .then(response => {
      //     if (response.data.code == "SUCCESS") {
      //       this.tableData = response.data.data.records;
      //     } else {
      //       alert(response.data.message);
      //     }
      //   })
      //   .catch(error => {
      //     alert(error.response.data.message);
      //   });
    },
    prePage(cpage) {
      this.data = {
        current: cpage,
        size: 5,
        condition: {
          pid: this.data.condition.pid
        }
      }
      // customList(this.data)
      //   .then(response => {
      //     if (response.data.code == "SUCCESS") {
      //       this.tableData = response.data.data.records;
      //     } else {
      //       alert(response.data.message);
      //     }
      //   })
      //   .catch(error => {
      //     alert(error.response.data.message);
      //   });
    },
    changeFun(val) {
      this.checkBoxData = val
    },
    handleClick(a) {
      localStorage.setItem('customid', a)

      this.$router.push('/custom/desc')
    },
    appends() {
      this.$router.push('/custom/save')
    },
    delClick(id) {
      var obj = {
        id: id,
        pid: this.data.condition.pid
      }
      this.$confirm('是否删除自定义属性', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cdsDel(obj).then(response => {
          if (response.data.code == 'SUCCESS') {
            this.onload()
          }
        })
      })
    },
    goback() {
      this.$router.push('/')
    },
    onload() {
      this.data.condition.pid = localStorage.getItem('pid')
      cdsList(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.tableData = response.data.data
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
          this.$router.push('/admin')
        })
    }
  }
}
</script>
<style>
#custom_list .el-input {
  width: 120px;
}
#custom_list {
  margin-top: 20px;
  margin-left: 20px;
}
#custom_list #mainBox {
  width: 99%;
  border: 1px solid #623f18;
}
#custom_list #mainBox #boxTit {
  height: 40px;
  width: 100%;
  background: #623f18;
}
#custom_list #mainBox #boxTit i {
  cursor: pointer;
  float: right;
  line-height: 40px;
  margin-right: 10px;
  font-size: 25px;
  color: #fff;
}
#custom_list #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
  line-height: 40px;
  float: left;
}
#custom_list .el-table {
  margin: 20px;
}
</style>
